<script setup>
import { useRoute,useRouter } from 'vue-router'
const route = useRoute()
const router=useRouter()
const title = route.meta.title
</script>

<template>
  <div class="title-wrappper">
    <div class="go-back" :class="{active:!title}" @click="router.push('/')">
      <el-icon :size="18" style="margin-right: 5px"><HomeFilled /></el-icon>首页
    </div>
    <div class="now-title active" v-if="title">{{ title }}</div>
  </div>
</template>

<style lang="scss" scoped>
.title-wrappper {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #eee;
  .go-back,
  .now-title {
    width: 120px;
    height: 30px;
    line-height: 30px;
    background-color: white; 
    border-radius: 20px;
    font-size: 16px;
    border: 1px solid #ccc;
    text-align: center;
    margin-left: 20px;
    cursor: pointer;
    &.active {
      background-color: #1890ff;
        color: white; 
    }
  }
}
</style>
